/**
 * Created by LINHAO on 2016/8/28.
 */
    var canvas;
    var width=110;
    var height=110;
    var content;
    num=2;
    var change_x;   //被选中的方块左上角x坐标
    var change_y;       //被选中的方块左上角y坐标
    var time=100;
    var level=0;
    var opacity=0.5;        //被选中方块的透明度初始数值
var name="正常人色彩识别水平";       //不同关数时，不一样的称呼


function createRect()
{
        canvas=document.getElementById("canvas");
        content=canvas.getContext("2d");
    /*
    * 以下的代码是设置出随机的颜色
    *
    * */

        var rcolor=parseInt(Math.random()*255);
        var gcolor=parseInt(Math.random()*255);
        var bcolor=parseInt(Math.random()*255);
        var color="rgb("+rcolor+","+gcolor+","+bcolor+")";
        var thecolor="rgba("+rcolor+","+gcolor+","+bcolor+","+opacity+")";
        content.fillStyle=color;
        change_x=width*parseInt(Math.random()*(num-1));
        change_y=height*parseInt(Math.random()*(num-1));
    /*
    * 以下的两个for循环是对于如何画出新的颜色格子的代码
    * */
        for(i=0;i<width*num;i+=width)
        {
            for(j=0;j<height*num;j+=height)
            {if(!(i==change_x && j==change_y))
                content.fillRect(i,j,width-10,height-10);}
        }
        content.fillStyle=thecolor;
        content.fillRect(change_x,change_y,width-10,height-10);//比较特别地那个格子


    if(window.addEventListener)           //对于不同类型的浏览器进行兼容
    {canvas.addEventListener("mousedown",click);}
    else
    {canvas.attachEvent("onmousedown",click,false);}

}

function click()   /*单击函数，当点击正确的时候，时间增加，点击错误，时间减少*/
{
        var x=event.clientX-300;
        var y=event.clientY-170;
        if(x>change_x&&x<(change_x+width-10)&&y>change_y&&y<(change_y+height-10))
       next();
    else
        {
            time-=2;
        }
}


function next()    //点击正确的函数
{

        canvas=document.getElementById("canvas");
        content=canvas.getContext("2d");
        content.clearRect(0,0,1500,1500);
        if(num<6) {
            width -= 10;
            height -= 10;
            createRect();       //重新绘画格子
            num++;
           level++;
            if(time<99)
            {time+=3;}
            opacity+=0.05;
        }
        else
        {
            createRect();       //重新绘画格子
            level++;
            if(opacity<=0.95)
            {
                opacity+=0.01;
            }
            if(time<99)
            time+=3;
        }
    if(level<10)
    { name="正常人色彩识别水平"}
    if(10<=level&&level<20)
        name="美术生色彩识别水平";
    if(20<=level&&level<30)
        name="画家色彩识别水平";
    if(30<=level&&level<40)
        name="天啊，你是毕加索吗！";
    if(40<=level)
        name="能有这实力的，也就华软人了！";
        document.getElementById("num").innerHTML="第"+level+"关"+"  "+name;


}


function timecount()
    {
        time--;
        var times=document.getElementById("progress").style.width=time+"%";
        if(time<=0)
        {
            alert("游戏结束！");
            location.reload();
        }
    }

function count()
    {
        setInterval(timecount,500);
    }

function startgame()
    {
        count();
        next();
        var start=document.getElementById("start");
        if(window.removeEventListener)          //对于不同类型的浏览器进行兼容
        start.removeEventListener('click',startgame);
        else
        start.detachEvent('onclick',startgame,false);
        document.getElementById("help").style.display='none';

    }

window.onload=function()
    {
        var start=document.getElementById("start");
        if(window.addEventListener)           //对于不同类型的浏览器进行兼容
        start.addEventListener('click',startgame);
    else
        start.attachEvent('onclick',startgame,false);
    }
